<template>
  <div>{{ person.name }} {{ person.age }}</div>
  <button @click="handleClick">修改 name 和 age</button>
</template>

<script>
// 需求： ref 也可以包装复杂数据类型
// ref 和 reactive 应用场景区分：当你明确知道需要处理的是一个复杂数据类型，就用 reactive，其他情况一律 ref
import { ref } from 'vue'
export default {
  setup() {
    const person = ref({
      name: 'xxx',
      age: 18,
    })
    const handleClick = () => {
      person.value.name = '张三'
      person.value.age = 20
    }
    return {
      person,
      handleClick,
    }
  },
}
</script>

<style lang="scss" scoped></style>
